<template>
  <div>
    <div class="right-block1">
      <div class="data-title">环境监测</div>
      <div class="display-flex" >
        <div class="box1 int text-center">
          <span class="per"  style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.standby3 }} m/s</span>
          <span><i class="iconfont icon-wind-speed-high" /><i class="txt">棚外风速</i></span>
        </div>
        <div class="box1 int text-center">
          <span class="per"  style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;"> {{ monitoringData.wind }}m/s</span>
          <span><i class="iconfont icon-wind-speed-high" /><i class="txt">棚内风速</i></span>
        </div>
        <div class="box1 int text-center">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.temp }}℃</span>
          <span><i class="iconfont icon-wendu1" /><i class="txt">温度</i></span>
        </div>
        <div class="box1 int text-center">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.humidity }}%</span>
          <span><i class="iconfont icon-Shape" /><i class="txt">湿度</i></span>
        </div>
      </div>
      <div class="display-flex"  style="font-size: 20px;text-indent: 1px;">
        <div class="box1 int text-center no-borderb">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.flammable_gas }}%</span>
          <span><i class="iconfont icon-CombinedShape" /><i class="txt">甲烷</i></span>
        </div>
        <div class="box1 int text-center no-borderb">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.oxygen }}%</span>
          <span><i class="iconfont icon-CombinedShape1" /><i class="txt">氧气</i></span>
        </div>
        <div class="box1 int text-center no-borderb">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.standby4 }}ppm</span>
          <span><i class="iconfont icon-CombinedShape" /><i class="txt">硫化氢</i></span>
        </div>
        <div class="box1 int text-center no-borderb">
          <span class="per" style="font-size: 18px;text-indent: 0px; letter-spacing:-1px;">{{ monitoringData.standby5 }}ppm</span>
          <span><i class="iconfont icon-CombinedShape" /><i class="txt">一氧化碳</i></span>
        </div>
      </div>
    </div>
    <div class="right-block1">
      <div class="data-title">安全监测</div>
      <div class="display-flex">
        <div class="box1 no-borderb" style="padding: 0">
          <div class="safe-block clearfix">
            <div class="left">
              <i class="iconfont icon-huapo" />
              <p class="txt">滑坡</p>
            </div>
            <div class="right">
              <el-form label-width="110px" label-suffix=":">
                <el-form-item label-width="100px" label="土壤湿度">
                  <label class="data">{{ waterContentA }} </label>
                </el-form-item>
                <el-form-item label-width="100px" label="滑坡角度">
                  <label class="data"> {{ inclinationA }} </label>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div
            class="safe-block clearfix"
            style="
              border-top: 1px solid rgba(92, 213, 200, 0.2);
              padding-top: 15px;
              margin-top: 10px;
            "
          >
            <div class="left" style="padding-top: 0">
              <i class="iconfont icon-touxiang" />
            </div>
            <div class="right">
              <el-form label-width="110px" label-suffix=":">
                <el-form-item label="作业区人数">
                  <label class="data"> 4 </label>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="box1 no-borderb" style="padding: 0">
          <div class="safe-block clearfix">
            <div class="left" style="padding-left: 13px">
              <i class="iconfont icon-loudian" />
              <p class="txt">漏电</p>
            </div>
            <div class="right">
              <el-form ref="form" label-width="80px" label-suffix=":">
                <el-form-item label="焊机01">
                  <label class="data">{{ LeakageA1 }}A</label>
                </el-form-item>
                <el-form-item label="焊机02">
                  <label class="data">{{ LeakageA2 }}A</label>
                </el-form-item>
                <el-form-item label="加热器">
                  <label class="data">{{ LeakageA3 }}A</label>
                </el-form-item>
                <el-form-item label="发电机">
                  <label class="data">{{ LeakageA4 }}A</label>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  postHandle
} from '@/api'
import AutoRefreshMixin from '../mixin/AutoRefreshMixin'
import dayjs from 'dayjs'
export default {
  name: 'DateShow',
  mixins: [AutoRefreshMixin],
  props: {
    newSpaceId: {
      type: String
    }
  },
  data() {
    return {
      n: 0,
      deviceList: [],
      deviceList1: [],
      monitoringData: {
        wind: 0,
        standby3:0,
        temp: 0,
        humidity: 0,
        flammable_gas: 0,
        oxygen: 0,
        nitrogen:0,
        standby5:0,
        standby4:0
      },
      arPurity: 0,
      airPressure: 0,
      airFlux: 0,
      waterTemp: 0,
      displacementA: 0,
      LeakageA1: 0,
      LeakageA2: 0,
      waterContentA:0,
      inclinationA:0,
      LeakageA3: 0,
      LeakageA4: 0,
      sceneCount: 0,
      entrance: 0,
      leave: 0
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    }
  },
  watch: {
    deviceList(val) {
      if (val && val.length > 0) {
        this.autoRefreshHandle()
      }
    },
    newSpaceId: {
      handler: async function(v) {
        if (v) {
          clearInterval(this.n)
          this.arPurity = 0
          this.airPressure = 0
          this.airFlux = 0
          this.waterTemp = 0
          this.LeakageA1 = 0
          this.LeakageA2 = 0
          this.LeakageA3 = 0
          this.LeakageA4 = 0
          this.entrance = 0
          this.leave = 0
          this.inclinationA= 0
          this.waterContentA= 0


          this.monitoringData.wind=0
          this.monitoringData.standby3=0
          this.monitoringData.temp=0
          this.monitoringData.humidity=0
          this.monitoringData.flammable_gas=0
          this.monitoringData.oxygen= 0
          this.monitoringData.nitrogen=0
          this.monitoringData.standby5=0
          this.monitoringData.standby4=0
          this.deviceList = await this.getDevice()
          // this.deviceList1 = await this.getDevice1('environmental')
          this.getPeopleNumber()
        }
      }
    }
  },
  async created() {
    this.deviceList = await this.getDevice()
    // this.deviceList1 = await this.getDevice1('environmental')
    this.getPeopleNumber()
  },
  beforeDestroy() {
    clearInterval(this.n)
  },
  methods: {
    refreshHandle() {
      this.getData()
      // this.getData2()
    },
    getDevice() {
      return new Promise((resolve, reject) => {
        postHandle('/api/v1/welder-sbtx-second/project-equipment-comb/list', {
          d: {
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            },
            {
              field: 'code',
              operator: 'EQUALS',
              value: 'safety'
            }
            ]
          }
        })
          .then((res) => {
            resolve(res.result.filter(item => item.gatewayInfo && item.gatewayInfo.gatewayCode))
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    // getDevice1(code) {
    //   return new Promise((resolve, reject) => {
    //     postHandle(
    //       `/api/v1/welder-sbtx-second/gateway-equipment-comb/get-gateway-by-device-code/${code}`,
    //       {
    //         d: {
    //           filters: []
    //         }
    //       }
    //     )
    //       .then((res) => {
    //         resolve(res.result)
    //       })
    //       .catch((error) => {
    //         reject(error)
    //       })
    //   })
    // },
    getData() {
      postHandle('/api/v1/welder-sbtx-second/hj-datas-log', {
        d: {
          filters: [{
            field: 'geteWayCode',
            operator: 'IN',
            values: this.deviceList.map((item) => item.gatewayInfo.gatewayCode)
          },
          {
            field: 'ct',
            operator: 'GT',
            value: dayjs().subtract(90, 'second').valueOf()
          }
            // {
            //   'field': 'kgl2',
            //   'operator': 'EQUALS',
            //   'value': '0'
            // }
          ],
          page: {
            ps: 1
          }
        }
      }).then((res) => {
        let data = res.result
        if (data && data.length > 0) {
          this.deviceList.forEach((item) => {
            let o = data.find((d) => d.geteWayCode === item.gatewayInfo.gatewayCode)
            if (o) {
              this.arPurity = o.arPurity ? o.arPurity : 0
              this.airPressure = o.airPressure ? o.airPressure : 0
              this.airFlux = o.airFlux ? o.airFlux : 0
              this.waterTemp = o.waterTemp ? o.waterTemp : 0
              this.LeakageA1 = o.LeakageA1 ? o.LeakageA1 : 0
              this.LeakageA2 = o.LeakageA2 ? o.LeakageA2 : 0
              this.LeakageA3 = o.LeakageA3 ? o.LeakageA3 : 0
              this.LeakageA4 = o.LeakageA4 ? o.LeakageA4 : 0
              this.entrance = o.entrance ? o.entrance : 0
              this.leave = o.leave ? o.leave : 0
              this.inclinationA= o.inclinationA ? o.inclinationA : 0
              this.waterContentA= o.waterContentA ? o.waterContentA : 0
              this.monitoringData.wind = o.wind ? o.wind : 0
              this.monitoringData.temp = o.temp ? o.temp : 0
              this.monitoringData.humidity = o.humidity ? o.humidity : 0
              this.monitoringData.flammable_gas = o.flammableGas ? o.flammableGas : 0
              this.monitoringData.oxygen = o.oxygen ? o.oxygen : 0
              this.monitoringData.nitrogen = 78


              this.monitoringData.wind= o.wind ? o.wind : 0
              this.monitoringData.standby3=o.standby3 ? o.standby3 : 0
              this.monitoringData.temp=o.temp ? o.temp : 0
              this.monitoringData.humidity=o.humidity ? o.humidity : 0
              this.monitoringData.flammable_gas=o.flammableGas ? o.flammableGas : 0
              this.monitoringData.oxygen=  o.oxygen ? o.oxygen : 0
              this.monitoringData.nitrogen=78
              this.monitoringData.standby5=o.standby5 ? o.standby5 : 0
              this.monitoringData.standby4=o.standby4 ? o.standby4 : 0
            }
          })
        } else {
          this.arPurity = 0
          this.airPressure = 0
          this.airFlux = 0
          this.waterTemp = 0
          this.LeakageA1 = 0
          this.LeakageA2 = 0
          this.LeakageA3 = 0
          this.LeakageA4 = 0
          this.entrance = 0
          this.leave = 0

          this.monitoringData.wind = 0
          this.monitoringData.temp = 0
          this.monitoringData.humidity = 0
          this.monitoringData.flammable_gas = 0
          this.monitoringData.oxygen = 0
          this.monitoringData.nitrogen = 0
        }
      })
    },
    getData2() {
      postHandle('/api/v1/welder-sbtx-second/hj-datas-log', {
        d: {
          filters: [{
            field: 'geteWayCode',
            operator: 'IN',
            values: this.deviceList1.map((item) => item.gatewayCode)
          },
          {
            field: 'ct',
            operator: 'GT',
            value: dayjs().subtract(5, 'second').valueOf()
          }
            // {
            //   'field': 'kgl2',
            //   'operator': 'EQUALS',
            //   'value': '1'
            // }
          ],
          page: {
            ps: 1
          }
        }
      }).then((res) => {
        let data = res.result
        this.monitoringData.wind = 0
        this.monitoringData.temp = 0
        this.monitoringData.humidity = 0
        this.monitoringData.flammable_gas = 0
        this.monitoringData.oxygen = 0
        this.monitoringData.nitrogen = 0
        if (data && data.length > 0) {
          this.deviceList1.forEach((item) => {
            let o = data.find((d) => d.geteWayCode === item.gatewayCode)
            if (o) {
              this.monitoringData.wind = o.wind ? o.wind : 0
              this.monitoringData.temp = o.temp ? o.temp : 0
              this.monitoringData.humidity = o.humidity ? o.humidity : 0
              this.monitoringData.flammable_gas = o.flammableGas
                ? o.flammableGas
                : 0
              this.monitoringData.oxygen = o.oxygen ? o.oxygen : 0
              this.monitoringData.nitrogen = o.oxygen
                ? 100 - (o.oxygen + 1)
                : 0
            }
          })
        }
      })
    },
    getPeopleNumber() {
      postHandle('/api/v1/welder-sbtx-second/hj-member-comb/people-number', {
        d: {},
        obj: {
          spaceId: this.newSpaceId || this.spaceId
        }
      }).then((res) => {
        this.sceneCount = res.result.sceneCount
      })
    }
  }
}
</script>

<style scoped>
</style>
